<template>
  <div class="pet-detail">
    <!-- 加载状态 -->
    <el-card v-if="loading" class="loading-card">
      <div class="loading-content">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
    </el-card>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error">
      <div class="error-icon">⚠️</div>
      <h3>加载失败</h3>
      <p>{{ error }}</p>
      <button @click="fetchPetDetail" class="retry-btn">重试</button>
    </div>

    <!-- 宠物详情内容 -->
    <div v-else-if="pet" class="pet-content">
      <!-- 返回按钮 -->
      <div class="back-button">
        <el-button @click="goBack" icon="el-icon-arrow-left">
          返回列表
        </el-button>
      </div>

      <!-- 宠物基本信息 -->
      <div class="pet-header">
        <div class="pet-image">
          <img :src="pet.image || '/default-pet.jpg'" :alt="pet.name" />
          <div class="pet-status" :class="returnText(pet.status)">
            {{ getStatusText(pet.status) }}
          </div>
        </div>

        <div class="pet-basic-info">
          <h1 class="pet-name">{{ pet.name }}</h1>
          <div class="pet-tags">
            <span class="tag species">{{ pet.type }}</span>
            <span class="tag breed">{{ pet.breed }}</span>
            <span class="tag gender" :class="pet.gender">{{ pet.gender === 'male' ? '♂ 雄性' : '♀ 雌性' }}</span>
          </div>

          <div class="pet-stats">
            <div class="stat-item">
              <span class="label">年龄</span>
              <span class="value">{{ pet.age }}</span>
            </div>
            <div class="stat-item">
              <span class="label">体重</span>
              <span class="value">{{ pet.weight }}</span>
            </div>
            <div class="stat-item">
              <span class="label">疫苗接种</span>
              <span class="value" :class="{ 'vaccinated': pet.vaccinated }">
                {{ pet.vaccinated ? '已接种' : '未接种' }}
              </span>
            </div>
            <div class="stat-item">
              <span class="label">绝育状态</span>
              <span class="value" :class="{ 'neutered': pet.neutered }">
                {{ pet.neutered ? '已绝育' : '未绝育' }}
              </span>
            </div>
          </div>
          <div class="action-buttons" v-if="pet.status === 1">
            <el-button @click="applyForAdoption" v-if="isLoggedIn" type="primary">
              申请领养
            </el-button>
            <el-button v-else @click="goToLogin" type="info">
              登录后申请
            </el-button>
          </div>
        </div>
      </div>

      <!-- 宠物详细描述 -->
      <div class="pet-description">
        <h2>关于 {{ pet.name }}</h2>
        <p>{{ pet.description || '暂无详细描述' }}</p>
      </div>

      <!-- 健康信息 -->
      <div class="health-info">
        <h2>健康信息</h2>
        <div class="health-grid">
          <div class="health-item">
            <span class="health-label">健康状况</span>
            <span class="health-value">{{ pet.healthStatus || '良好' }}</span>
          </div>
          <div class="health-item">
            <span class="health-label">特殊需求</span>
            <span class="health-value">{{ pet.specialNeeds || '无' }}</span>
          </div>
        </div>
      </div>

      <!-- 联系信息 -->
      <div class="contact-info">
        <h2>联系信息</h2>
        <div class="contact-details">
          <div class="contact-item">
            <span class="contact-label">救助机构</span>
            <span class="contact-value">{{ pet.shelter || '爱心宠物救助中心' }}</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">联系电话</span>
            <span class="contact-value">{{ pet.contactPhone || '400-123-4567' }}</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">地址</span>
            <span class="contact-value">{{ pet.address || '北京市朝阳区宠物救助中心' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPetDetail } from '@/api/pet'
import { addAdoption } from '@/api/adoption-record'
export default {
  name: 'PetDetail',
  data() {
    return {
      pet: null,
      loading: true,
      error: null
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'user']),
  },
  created() {
    this.fetchPetDetail()
  },
  methods: {
    async fetchPetDetail() {
      try {
        this.loading = true
        this.error = null

        const petId = this.$route.params.id
        if (!petId) {
          throw new Error('宠物ID不存在')
        }

        // 模拟API调用 - 实际项目中应该调用真实API
        const res = await getPetDetail(petId)
        this.pet = res.data
      } catch (error) {
        this.error = error.message || '加载宠物信息失败'
      } finally {
        this.loading = false
      }
    },
    returnText(status) {
      if (status === 1) {
        return 'available'
      } else if (status === 2) {
        return 'pending'
      } else if (status === 3) {
        return 'adopted'
      }
      return status
    },
    getStatusText(status) {
      const statusMap = {
        1: '可领养',
        2: '申请中',
        3: '已领养'
      }
      return statusMap[status] || '未知状态'
    },
    goToLogin() {
      this.$router.push('/login')
    },
    goBack() {
      this.$router.go(-1)
    },

    async applyForAdoption() {
      // 实际项目中应该调用领养申请API
      try {
        // 删除this.pet中的id属性
        delete this.pet.id
        const res = await addAdoption({
          petId: this.pet.id,
          userId: this.user.id,
          ...this.pet
        })
        if (res.code === 200) {
          this.$message({
            message: '领养申请已提交',
            type: 'success'
          })
          this.$router.push('/my-applications')
        } else {
          this.$message({
            message: res.msg || '领养申请失败',
            type: 'error'
          })
        } 
      } catch (error) {
        this.$message({
          message: error.message || '领养申请失败',
          type: 'error'
        })
      }
    },
  }
}
</script>

<style scoped>
.pet-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #666;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 错误状态 */
.error {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retry-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 16px;
}

.retry-btn:hover {
  background: #0056b3;
}

/* 返回按钮 */
.back-button {
  margin-bottom: 20px;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #ddd;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.btn-back:hover {
  background: #f8f9fa;
  color: #333;
}

.back-icon {
  font-size: 18px;
}

/* 宠物头部信息 */
.pet-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.pet-image {
  position: relative;
}

.pet-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.pet-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.pet-status.available {
  background: #28a745;
}

.pet-status.pending {
  background: #ffc107;
  color: #333;
}

.pet-status.adopted {
  background: #6c757d;
}

.pet-name {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 0 0 16px 0;
}

.pet-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.tag.species {
  background: #e3f2fd;
  color: #1976d2;
}

.tag.breed {
  background: #f3e5f5;
  color: #7b1fa2;
}

.tag.gender.male {
  background: #e8f5e8;
  color: #2e7d32;
}

.tag.gender.female {
  background: #fce4ec;
  color: #c2185b;
}

.pet-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.stat-item .label {
  color: #666;
  font-weight: 500;
}

.stat-item .value {
  font-weight: bold;
  color: #333;
}

.stat-item .value.vaccinated,
.stat-item .value.neutered {
  color: #28a745;
}

/* 内容区块 */
.pet-description,
.health-info,
.contact-info {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.pet-description h2,
.health-info h2,
.contact-info h2 {
  color: #333;
  margin: 0 0 16px 0;
  font-size: 20px;
}

.pet-description p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.health-item,
.contact-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.health-label,
.contact-label {
  color: #666;
  font-weight: 500;
}

.health-value,
.contact-value {
  font-weight: bold;
  color: #333;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 30px;
}
</style>